<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>全局注册组件</h2>
    <my-header></my-header>
    <my-content></my-content>
    <my-footer></my-footer>
  </div>

  <script src="../vue3.js"></script>
  <script>
    const {createApp} = Vue;

    const app = createApp({});

    // app实例有一个component方法，就是用来创建全局组件的
    // 第一个参数是组件的名字
    // 第二个参数是一个选项对象，写选项（跟app实例相同,必须要多一个template选项）


    // 组件名的命名
    // 语义化
    // 建议使用大驼峰或者连字符(为了和当前已有的标签或者未来可能有的标签区分开来)
    // 取名的时候不管用大驼峰还是连字符，调用的时候统一使用连字符


    // 注意点:
    // 1. 在vue2版本里面，每一个组件都必须只有一个根元素。并且不能是template
    // 2. 每一个组件都自己维护自己的数据和方法（组件之间是不共享数据的）
    app.component("MyHeader", {
      template: `
        <header>这是头部 - {{ count }} - <button @click="fn">btn</button></header>
        <div>123</div>
      `,
      data() {
        return {
          count: 1,
        }
      },
      methods: {
        fn() {
          this.count++;
        }
      }
    })

    app.component("MyContent", {
      template: `
        <main>
          这是内容
          <my-content-item></my-content-item>
          <my-content-item></my-content-item>
          <my-content-item></my-content-item>
          <my-content-item></my-content-item>
          <my-content-item></my-content-item>
        </main>
      `
    })


    app.component("MyContentItem", {
      template: `
        <div>这是内容的item</div>
      `
    })

    app.component("MyFooter", {
      template: `
        <footer>这是底部</footer>
      `
    })

    app.mount("#app");
  </script>
</body>
</html>